<template>
  <div class="search">
    <Modal
      v-model="modalVisible"
      :title="modalTitle"
      width="40"
      @on-cancel="handleModalChange">
      <Tabs @on-click="handleTabClick" :value="current">
        <TabPane label="基本信息" name="form1">
          <app-info ref="form1" :parent-visable.sync="modalVisible"></app-info>
        </TabPane>
        <TabPane :disabled="!isEdit" label="第三方应用认证" name="form2">
          <app-client ref="form2"></app-client>
        </TabPane>
        <TabPane :disabled="!isEdit" label="第三方应用授权" name="form3">
          <app-auth ref="form3"></app-auth>
        </TabPane>
      </Tabs>
      <div class="drawer-footer">
        <Button type="default" @click="handleModalChange(false)">取消</Button>&nbsp;
        <Button type="primary" @click="handleSubmit" :loading="saving">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import AppInfo from './form/app-info'
import AppClient from './form/app-client'
import AppAuth from './form/app-auth'

export default {
  name: 'AppModal',
  components: { AppInfo, AppClient, AppAuth },
  props: {},
  data () {
    return {
      saving: false,
      modalVisible: false,
      isEdit: false,
      modalTitle: '',
      current: 'form1',
      appName: '',
      formData: {},
      forms: [
        'form1',
        'form2',
        'form3'
      ]
    }
  },
  methods: {
    handleShow (data, current) {
      this.isEdit = false
      this.appName = ''
      if (data && data.appId) {
        this.isEdit = true
        this.appName = data.appName
        this.formData = data
      } else {
        this.formData = {}
      }
      if (current) {
        this.handleTabClick(current)
      } else {
        this.handleTabClick('form1')
      }
      this.modalVisible = true
    },
    handleModalChange (visible) {
      if (!visible) {
        this.$refs[this.current].handleReset()
        this.modalVisible = false
        this.$emit('reloadTable')
      }
    },
    handleSubmit () {
      this.saving = true
      this.$refs[this.current].handleSubmit().then(res => {
        if (res) {
          this.handleModalChange(false)
        }
      }).finally(() => {
        this.saving = false
      })
    },
    handleTabClick (name) {
      this.current = name
      this.modalTitle = this.isEdit ? `编辑 - ${this.appName}` : '新增'
      this.$refs[this.current].setData(this.formData)
    }
  },
  created () {

  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
